<template>
  <div class="app-container">
    <div id="viewDiv"></div>
    <span id="layerToggle">
      <input type="checkbox" id="tlLayer01" checked> 影像注记<br />
      <input type="checkbox" id="tlLayer02" checked> 矢量数据<br />
      <input type="checkbox" id="tlLayer03" checked> 矢量注记<br />
      <!-- <input type="checkbox" id="tlLayer04" checked> tlLayer04<br />
      <input type="checkbox" id="tlLayer05" checked> tlLayer05<br /> -->
    </span>
  </div>
</template>
<style scoped>
  @import url('https://js.arcgis.com/4.7/esri/css/main.css');
  html,
  body,  
  #viewDiv {
    margin: 5px auto;
    border: 1px solid #000;
    width: 100%;
    height: 700px;
  }


  #layerToggle {
    top: 120px;
    right: 70px;
    position: absolute;
    z-index: 99;
    background-color: white;
    border-radius: 8px;
    padding: 10px;
    opacity: 0.75;
  }
</style>
<script>
 
  // js 代码
  //import  arcgisConfig  from '@/mapConfig'
  import esriLoader from 'esri-loader';
  //
  export default {
 
    data () {
      return {
        
      }
    },
    created: function () {
      
    },
    mounted: function () {
      const _this = this;
      this.$nextTick(function () {
           _this.test1();
      })
    },
    methods:{
      test1:function () {
        const options = {
           url: "https://js.arcgis.com/4.7" //本地js资源
        };
        esriLoader.loadModules ([
          "esri/Map",
          "esri/views/SceneView",
          "esri/views/MapView",
          "esri/layers/TileLayer",
          "esri/layers/ImageryLayer",
          "esri/Basemap",
          "dojo/dom",
          "dojo/on",
          "dojo/domReady!"
        ],options)
          .then (([
                    Map, SceneView,MapView,
                    TileLayer,ImageryLayer,Basemap,
                     dom, on
                  ]) => {

                    // http://www.dzmap.cn/arcgis/rest/services/vec/MapServer 矢量
                    // http://www.dzmap.cn/arcgis/rest/services/ant/MapServer 注记
                    // http://www.dzmap.cn/arcgis/rest/services/img_services/MapServer 影像
                    // http://www.dzmap.cn/arcgis/rest/services/imgzhuji/MapServer 影像注记
                    // http://www.dzmap.cn/arcgis/rest/services/hn1w/MapServer 1万网格

                        var veclayer = new TileLayer({
                            url: "http://www.dzmap.cn/arcgis/rest/services/vec/MapServer",
                            title: "矢量地图",
                        });
                        var cvalayer = new TileLayer({
                            url: "http://www.dzmap.cn/arcgis/rest/services/ant/MapServer",
                            title: "矢量注记地图",
                        });
                        var cialayer = new TileLayer({
                            url: "http://www.dzmap.cn/arcgis/rest/services/imgzhuji/MapServer",
                            title: "影像注记地图",
                        });
                        var imglayer = new TileLayer({
                            url: "http://www.dzmap.cn/arcgis/rest/services/img_services/MapServer",
                            title: "影像地图",
                        });

                      var vecBasemap = new Basemap({
                        baseLayers: [
                        veclayer
                        ],
                        id:"sldt",
                        title: "矢量地图",
                        thumbnailUrl: "http://www.dzmap.cn/arcgis/rest/services/vec/MapServer/export?bbox=108.51210030209486%2C24.364923864731523%2C114.52924109256693%2C30.40363488070311&bboxSR=&layers=&layerDefs=&size=&imageSR=&format=png&transparent=false&dpi=&time=&layerTimeOptions=&dynamicLayers=&gdbVersion=&mapScale=&f=image",
                      });

                      var imgBasemap = new Basemap({
                        baseLayers: [
                        imglayer
                        ],
                        id:"xyt",
                        title: "影像地图",
                        thumbnailUrl: "http://www.dzmap.cn/arcgis/rest/services/img_services/MapServer/export?bbox=108.51210030209486%2C24.364923864731523%2C114.52924109256693%2C30.40363488070311&bboxSR=&layers=&layerDefs=&size=&imageSR=&format=png&transparent=false&dpi=&time=&layerTimeOptions=&dynamicLayers=&gdbVersion=&mapScale=&f=image",
                      });

                      // var transportationLyr = new TileLayer({
                      //   url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
                      //   // This property can be used to uniquely identify the layer
                      //   id: "streets"
                      // });

                      // var housingLyr = new TileLayer({
                      //   url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
                      //   id: "ny-housing"
                      // });

                      //  var tsBasemap = new Basemap({
                      //   baseLayers: [
                      //   transportationLyr, housingLyr
                      //   ],
                      //   id:"testmap",
                      //   title: "测试地图"
                      //  });
                      
                      /*****************************************************************
                       * Layers may be added to the map in the map's constructor
                       *****************************************************************/
                      var map = new Map({
                        basemap: imgBasemap,
                        layers: [cialayer, veclayer, cvalayer],
                        center: [113, 29],
                        zoom: 2,
                      });
                      
                      /*****************************************************************
                       * Or they may be added to the map using map.add()
                       *****************************************************************/
                      // map.add(tlLayer01);
                      // map.add(tlLayer02);
                      // map.add(tlLayer03);
                      //map.add(tlLayer04);
                      //map.add(tlLayer05);

                      var view = new MapView({
                        container: "viewDiv",
                        map: map
                      });

                      /*****************************************************************
                       * The map handles the layers' data while the view and layer views
                       * take care of renderering the layers
                       *****************************************************************/
                      view.on("layerview-create", function(event) {
                          console.log("LayerView for "+event.layer.id+" population created!", event.layerView);
                      });

                      /*****************************************************************
                       * Layers are promises that resolve when loaded, or when all their
                       * properties may be accessed. Once the population layer has loaded,
                       * the view will animate to it's initial extent.
                       *****************************************************************/
                      view.when(function() {
                        tlLayer01.when(function() {
                          view.goTo(tlLayer01.fullExtent);
                        });
                      });

                      var tlLayer01Toggle = dom.byId("tlLayer01");
                      var tlLayer02Toggle = dom.byId("tlLayer02");
                      var tlLayer03Toggle = dom.byId("tlLayer03");
                    //   var tlLayer04Toggle = dom.byId("tlLayer04");
                    //   var tlLayer05Toggle = dom.byId("tlLayer05");
                      /*****************************************************************
                       * The visible property on the layer can be used to toggle the
                       * layer's visibility in the view. When the visibility is turned off
                       * the layer is still part of the map, which means you can access
                       * its properties and perform analysis even though it isn't visible.
                       *******************************************************************/
                      on(tlLayer01Toggle, "change", function() {
                        cialayer.visible = tlLayer01Toggle.checked;
                      });
                      on(tlLayer02Toggle, "change", function() {
                        veclayer.visible = tlLayer02Toggle.checked;
                      });
                      on(tlLayer03Toggle, "change", function() {
                        cvalayer.visible = tlLayer03Toggle.checked;
                      });
                    //   on(tlLayer04Toggle, "change", function() {
                    //     tlLayer04.visible = tlLayer04Toggle.checked;
                    //   });
                    //   on(tlLayer05Toggle, "change", function() {
                    //     tlLayer05.visible = tlLayer05Toggle.checked;
                    //   });
                      
          }, reason => {
            console.log (reason);
          });
      }
    }
  }
</script>
